<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise的Ajax</title>
  </head>
  <body>
    <script>
      const loadData = function (url) {
        const p = new Promise(function (resolve, reject) {
          //通过原生的ajax发生异步请求
          const xhr = new XMLHttpRequest();
          xhr.open("get", url);
          xhr.onreadystatechange = function () {
            if (xhr.readyState != 4) return;
            if (xhr.readyState == 4 && xhr.status == 200) {
              //ajax的异步结果正确响应
              resolve(xhr.responseText);
            } else {
              //ajax处理结果异常
              reject("服务器繁忙...");
            }
          };
          xhr.send(null);
        });

        return p;
      };

      //发送一个请求
      loadData("http://localhost:3000/jq01")
        .then(function (data) {
          console.log(data);
          return loadData("http://localhost:3000/jq02");
        })
        .then(function (data) {
          console.log(data);
          return loadData("http://localhost:3000/jq03");
        })
        .then(function (data) {
          console.log(data);
          return "hello  then";
        })
        .then(function (data) {
          console.log(data);
        });
    </script>
  </body>
</html>
